<template>
    <view class="globe_back">
        <view class="box">
            <view class="f_40 fw_bold">写评价，请给这次服务体验打分</view>
            <view class="back_fff list">
                <view class="flex justify_content_between pt_24">
                    <view class="round"></view>
                    <view class="title">{{lists.vehicle.trailer_address}}</view>
                </view>
                <view class="flex justify_content_between pt_24">
                    <view class="round" style="background: #3377ff"></view>
                    <view class="title">
                        <view class="address">{{lists.Destination.user_location}}</view>
                        <view>
                            <text class="name">{{lists.Destination.consignee}}</text>
                            <text class="iphone">{{lists.Destination.mobile}}</text>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 接单员 -->
        <view class="flex justify_content_between store">
            <view class="flex">
                <image class="storeImg" :src="lists.order_taker.avatar" mode=""></image>
                <view>
                    <view class="storeTitle">{{lists.order_taker.name}}</view>
                    <view class="salesVolume"><u-rate :count="count" v-model="lists.order_taker.star" active-color="#FF6401" inactive-color="#F7F7F7" size="16" gutter="2"></u-rate></view>
                </view>
            </view>
            <view>
                <image class="address" :src="url + 'icon_dpdz.png'" mode=""></image>
                <text class="addressText">电话联系</text>
            </view>
        </view>
            <!-- 评价 -->
            <view class="store">
                <view class="f_28">评价</view>
                <textarea class="f_28" name="" id="" cols="30" rows="10" v-model="AfterSales"  placeholder="在这里输入您的评价"></textarea>
                <view>
                    <!-- <view class="flex flex-wrap">
                        <view v-if="images.length > 0" v-for="(item, i) in images">
                            <image class="storeImg" :src="item" mode="widthFix"></image>
                            <view class="imm_delete" @click="deletephotos(i)">
                                <image class="icon_ljt" :src="url + 'icon_sc.png'"></image>
                            </view>
                        </view>
                        <view class="img_add" style="display: inline-block" v-if="images.length < maxImagesNum" @click="instoreImages">
                            <image :src="url + 'updata-img.png'" mode="" style="width: 100%; height: 100%"></image>
                        </view>
                    </view> -->
					<u-upload
						:fileList="fileList1"
						@afterRead="afterRead"
						@delete="deletePic"
						name="1"
						multiple
						:maxCount="6"
						width="70"
						height="70"
					 >
						<view class="img_add" style="display: inline-block" >
						    <image :src="url + 'updata-img.png'" mode="" style="width: 100%; height: 100%"></image>
						</view>
					</u-upload>
                </view>
            </view>
            <!-- 服务体验 -->
            <view class="flex store">
                <view class="f_28 starTitle">服务体验</view>
                <view class="flex">
                    <!-- <image v-for="i in 5" :key="'star' + i" v-if="starIndex > i" @click="starIndex = i + 1" class="star" src="@/static/imgs/star.png" mode="widthFix"></image>
          <image v-for="i in 5" :key="'star_k' + i" v-if="starIndex <= i" @click="starIndex = i + 1" class="star" src="@/static/imgs/star_k.png" mode="widthFix"></image> -->
                    <u-rate :count="count" v-model="starIndex" active-color="#FF6401" inactive-color="#F7F7F7" :size="24" gutter="2" />
                    <view class="starText" v-if="starIndex == 1">差评！</view>
                    <view class="starText" v-if="starIndex == 2">差评！</view>
                    <view class="starText" v-if="starIndex == 3">中评！</view>
                    <view class="starText" v-if="starIndex == 4">中评！</view>
                    <view class="starText" v-if="starIndex == 5">好评！</view>
                </view>
            </view>
            <view class="couponBtn" @click="qx()">提交评价</view>
        </view>
    </view>
</template>

<script>
import { common } from '@/common/serve.js';
export default {
    data() {
        return {
            url: '',
            count: 5,
            value: 5,
            images: [],
            maxImagesNum: 6,
            starIndex: 0,
			id:0,
			lists:'',
			fileList1: [],
			AfterSales:'',
			// images:[],
        };
    },
    onShow() {
        this.url = this.baseUrl + this.imgPath;
    },
    onLoad(e) {
        // this.init();
		this.id=e.id
		this.list()
		
    },
	methods: {
		list(){
			this.$.ajax(1, "POST", "users/service_order", {
					order_id:this.id,
					lat:39.222,
					lng:117.333,
				}, (res) => {
					if(res.code==200){
						// this.$.ti_shi(res.msg)
						this.lists=res.data
						 // setTimeout(()=>{
							//  this.$emit('handleGetOrderList')
						 // },1000)
						 
					}else{
						this.$.ti_shi(res.msg)
					}
				})
		},
		qx(){
			let data={
				  content:this.AfterSales,
				  start:this.starIndex,
				  images:this.images.join(','),
				  order_id:this.id,
				  product_type:this.lists.product_type,
				  q_user_id:this.lists.order_taker.id,
			    }
				// console.log(data);return;
			this.$.ajax(1, "POST", "users/add_evaluate", data, (res) => {
					if(res.code==200){
						
						 this.$.ti_shi(res.msg)
						 uni.$emit('evaluate', 1);
						  setTimeout(()=>{
							   
						 	   uni.navigateBack({
								   delta:1 
							   })
						  },1000)
						 
					}else{
						this.$.ti_shi(res.msg)
					}
				})
		},
		
		// 删除图片
		deletePic(event) {
			this.images.splice(event.index, 1)
			this[`fileList${event.name}`].splice(event.index, 1)
		},
		// 新增图片
		async afterRead(event) {
			// console.log(event);return;
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		uploadFilePromise(url) {
		
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: this.$.ajax_url+'common/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {
						
						this.images.push(JSON.parse(res.data).data.url)
						console.log(this.images)
						setTimeout(() => {
							resolve(res.data.data)
						}, 1000)
					}
				});
			})
		},
	},
	
	ods: {
		

        // 删除现场照片
        deletephotos(i) {
            this.images.splice(i, 1);
        },
        // 现场照片
        async instoreImages() {
            let images = this.images;
            let num = this.maxImagesNum - images.length; //图片长度

            const result = await common.chooseImage(num).catch((err) => console.log('chooseImageErrMsg:', err));
            const suceessList = (result || []).filter((item) => item.isSuccess === true);
            if (suceessList.length > 0) {
                suceessList.map((item) => {
                    images.push(item.path);
                });

                this.images = images;
            }
        }
    }
};
</script>

<style scoped lang="scss">
.box {
    padding: 32rpx;
    .list {
        padding: 24rpx;
        border-radius: 24rpx;
        margin-top: 24rpx;
        .round {
            width: 16rpx;
            height: 16rpx;
            border-radius: 50%;
            background: #00091a;
            font-size: 28rpx;
            margin-top: 16rpx;
        }
        .type {
            color: #3377ff;
            font-weight: bold;
        }
        .time {
            color: #ccced1;
        }
        .title {
            width: 90%;
            color: #00091a;
            font-size: 32rpx;
            font-weight: bold;
        }
        .address {
            display: inline-block;
            white-space: nowrap;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .name {
            font-weight: normal;
            color: #333a47;
            margin-right: 24rpx;
        }
        .iphone {
            font-weight: normal;
            color: #999ca3;
        }
        .money {
            text-align: right;
            color: #666b75;
        }
        .money text {
            color: #ff6401;
            font-weight: bold;
            font-size: 32rpx;
        }
        .btn {
            text-align: right;
        }
        .cance {
            width: 160rpx;
            height: 68rpx;
            line-height: 68rpx;
            border-radius: 8rpx;
            color: #666b75;
            text-align: center;
            border: 2rpx solid #ccced1;
            margin-top: 24rpx;
        }
        .buy {
            width: 160rpx;
            height: 68rpx;
            line-height: 68rpx;
            border-radius: 8rpx;
            color: #ffffff;
            text-align: center;
            background: #3377ff;
            margin-left: 24rpx;
            margin-top: 24rpx;
        }
    }

    .store {
        padding: 24rpx;
        background: white;
        border-radius: 24rpx;
        margin-top: 30rpx;
    }
    .storeImg {
        width: 96rpx;
        height: 96rpx;
        border-radius: 16rpx;
        margin-right: 16rpx;
    }
    .storeTitle {
        color: #00091a;
        font-size: 32rpx;
        margin-bottom: 8rpx;
    }
    .address {
        width: 48rpx;
        height: 48rpx;
        display: block;
        margin: 0 auto;
    }
    .addressText {
        color: #999ca3;
        font-size: 24rpx;
    }
    .salesVolume {
        color: #999ca3;
        font-size: 28rpx;
    }
}
.imgbox {
    background: white;
    border-radius: 24rpx;
    padding: 32rpx 24rpx;
    color: #333a47;
    font-size: 28rpx;
    margin-top: 24rpx;
}
.img_add {
    width: 140rpx;
    height: 140rpx;
}
.imgbox {
    background: white;
    border-radius: 24rpx;
    padding: 32rpx 24rpx;
    color: #333a47;
    font-size: 28rpx;
    margin-top: 24rpx;
}
.star {
    width: 48rpx;
    height: 48rpx;
}
.starTitle {
    padding-right: 48rpx;
}
.couponBtn {
    margin: 24rpx auto;
    width: 686rpx;
    height: 100rpx;
    border-radius: 24rpx;
    background: #3377ff;
    text-align: center;
    line-height: 100rpx;
    color: white;
    font-size: 32rpx;
    font-weight: bold;
}
.starText {
    margin-left: 16rpx;
    font-size: 32rpx;
    color: #ff6401;
    font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
}
</style>
